<template>
  <div
    :class="[prefixCls + '-saturation-wrapper']"
    tabindex="0"
    @keydown.esc="handleEscape"
    @click="$el.focus()"
    @keydown.left="handleLeft"
    @keydown.right="handleRight"
    @keydown.up="handleUp"
    @keydown.down="handleDown"
  >
    <div
      ref="container"
      :style="bgColorStyle"
      :class="[prefixCls + '-saturation']"
      @mousedown="handleMouseDown">
      <div :class="[prefixCls + '-saturation--white']"></div>
      <div :class="[prefixCls + '-saturation--black']"></div>
      <div
        :style="pointerStyle"
        :class="[prefixCls + '-saturation-pointer']">
        <div :class="[prefixCls + '-saturation-circle']"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed,inject} from "vue"

import {clamp,getIncrement,getTouches} from "../utils"
import { on, off } from '../../../utils/dom';
import {isClient} from "../../../utils/index"
import {useHas} from "./utils"
defineOptions({
  name:'Saturation'
})
const ColorPickerInstance=inject('ColorPickerInstance')
const prefixCls=ref('haloe-color-picker')
const container=ref()
const props=defineProps({
  focused: {
    type: Boolean,
    default: false,
  },
  value: {
    type: Object,
    default: undefined,
  }
})

const emits=defineEmits(['change'])
const normalStep = 0.01;

let left=ref(-normalStep)
let right=ref(normalStep)
let up=ref(normalStep)
let down=ref(-normalStep)
let multiplier=ref(10)
let powerKey=ref('shiftKey')

const bgColorStyle=computed(()=>{
  return { background: `hsl(${props.value.hsv.h}, 100%, 50%)` };
})

const pointerStyle=computed(()=>{
  return { top: `${-(props.value.hsv.v * 100) + 1 + 100}%`, left: `${props.value.hsv.s * 100}%` };
})

const change =(h, s, v, a)=> {
  emits('change', { h, s, v, a, source: 'hsva' });
}
const handleSlide= (e, direction, key)=> {
  e.preventDefault();
  e.stopPropagation();

  const isPowerKey = e[powerKey.value];
  const increment = isPowerKey ? direction * multiplier.value : direction;
  const {h, s, v, a} = props.value.hsv;
  const saturation = clamp(s + getIncrement(key, ['left', 'right'], increment), 0, 1);
  const bright = clamp(v + getIncrement(key, ['up', 'down'], increment), 0, 1);

  change(h, saturation, bright, a);
}

const getLeft= (e)=> {
  if (!isClient) return;
  // const {container} = this.$refs;
  const xOffset = container.value.getBoundingClientRect().left + window.pageXOffset;
  const pageX = e.pageX || getTouches(e, 'PageX');

  return pageX - xOffset;
}

const getTop= (e)=> {
  if (!isClient) return;
  // const {container} = this.$refs;
  const yOffset = container.value.getBoundingClientRect().top + window.pageYOffset;
  const pageY = e.pageY || getTouches(e, 'PageY');

  return pageY - yOffset;
}

const handleChange= (e)=> {
  e.preventDefault();
  e.stopPropagation();

  const { clientWidth, clientHeight } = container.value;
  const left = clamp(getLeft(e), 0, clientWidth);
  const top = clamp(getTop(e), 0, clientHeight);
  const saturation = left / clientWidth;
  const bright = clamp(1 - top / clientHeight, 0, 1);

  change(props.value.hsv.h, saturation, bright, props.value.hsv.a);
}
const {handleLeft,handleRight,handleUp,handleDown,handleMouseDown,handleEscape}=useHas({left:left.value,right:right.value,up:up.value,down:down.value},handleChange,handleSlide,ColorPickerInstance,true)



</script>

<style>

</style>